/* dialog的遮罩层 */
.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	background: rgba(0,0,0,0.5);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

/* dialog的容器 */
.md-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	height: auto;
	z-index: 2000;
	visibility: hidden;
  
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);

  border-radius: 3px;
  background-color: white;
  padding: 16px;

  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

@media (max-width: 768px){
  .md-modal{
    left: 0;
    right: 0;
    width: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
  	-moz-transform: translateY(-50%);
	  -ms-transform: translateY(-50%);
    transform: translateY(-50%);

    border-radius: 0px;
  }
}

.md-modal-right{
	position: fixed;
	top: 0;
  bottom: 0;
  right: 0;
	
	z-index: 2000;
  visibility: hidden;
}

@media (max-width: 360px){
  .md-modal-right{
    left: 0;
    right: 0;
    top:0;
		bottom: 0;
		width: 100%;
		height: 100%;
  }
}

.md-show {
	visibility: visible;
}

.md-show ~ .md-overlay {
	opacity: 1;
	visibility: visible;
}

/* 不同的展开效果 */
.md-effect-1 .md-content {
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-ms-transform: scale(0.7);
	transform: scale(0.7);
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show.md-effect-1 .md-content {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

.md-effect-2 .md-content {
	-webkit-transform: translateX(20%);
	-moz-transform: translateX(20%);
	-ms-transform: translateX(20%);
	transform: translateX(20%);
	opacity: 0;
	-webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	-moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

.md-show.md-effect-2 .md-content {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
}

.md-content {
	width: 360px;
	background-color: white;
	position: relative;
}